<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <select name="" id="province">
        <option value="">请选择</option>
    </select>

    <select name="" id="city">
        <option value="">请选择</option>
    </select>


    <script>

        // 先请求到数据
        const xhr = new XMLHttpRequest();
        xhr.open('get', '../data/city.json', true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let data = this.responseText;
                data = JSON.parse(data);
                console.log(data);

                // 渲染省份
                let proHTML = '<option value="">请选择</option>';
                data.forEach(item => {
                    proHTML += `<option value="${item.pro}">${item.pro}</option>`
                })
                document.querySelector('#province').innerHTML = proHTML;



                document.querySelector('#province').onchange = function () {
                    console.log(this.value);

                    const res = data.find(item => item.pro === this.value);
                    console.log(res);

                    if (res) {
                        const arr = res.children;
                        // 渲染市
                        let cityHTML = '<option value="">请选择</option>';
                        arr.forEach(item => {
                            cityHTML += `<option value="${item}">${item}</option>`
                        })
                        document.querySelector('#city').innerHTML = cityHTML;
                    }
                    else {
                        document.querySelector('#city').innerHTML = '<option value="">请选择</option>';
                    }

                }




            }
        }






    </script>


</body>

</html>